"use client";

import React, { useState, useEffect } from 'react';
import { X, Shield, Heart, Code, GitPullRequest } from 'lucide-react';
import Link from 'next/link';

export function WelcomeModal() {
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    const hasShown = localStorage.getItem('welcomeShown');
    if (!hasShown) {
      setIsOpen(true);
      localStorage.setItem('welcomeShown', 'true');
    }
  }, []);

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
      <div className="bg-card rounded-xl shadow-lg max-w-2xl w-full animate-in fade-in-0 zoom-in-95">
        <div className="p-6 space-y-6">
          {/* 头部 */}
          <div className="flex justify-between items-start">
            <div className="space-y-2">
              <h2 className="text-2xl font-bold tracking-tight">欢迎使用心身同调</h2>
              <p className="text-muted-foreground">
                感谢您访问我们的项目
              </p>
            </div>
            <button
              onClick={() => setIsOpen(false)}
              className="p-2 hover:bg-accent rounded-lg transition-colors"
            >
              <X className="w-4 h-4" />
            </button>
          </div>

          {/* 项目信息 */}
          <div className="space-y-4">
            <div className="flex items-start gap-3">
              <Shield className="w-5 h-5 text-primary mt-1" />
              <div>
                <h3 className="font-medium mb-1">项目声明</h3>
                <p className="text-sm text-muted-foreground">
                  本项目由 zeroicey 开发，仅用于参加"传智杯" Web 网页开发挑战赛
                </p>
              </div>
            </div>

            <div className="flex items-start gap-3">
              <Code className="w-5 h-5 text-primary mt-1" />
              <div>
                <h3 className="font-medium mb-1">开源协议</h3>
                <p className="text-sm text-muted-foreground">
                  项目采用 MIT 协议开源，请遵循相关许可条款，尊重知识产权
                </p>
              </div>
            </div>

            <div className="flex items-start gap-3">
              <Heart className="w-5 h-5 text-primary mt-1" />
              <div>
                <h3 className="font-medium mb-1">项目愿景</h3>
                <p className="text-sm text-muted-foreground">
                  致力于为用户提供全面的健康管理解决方案，关注身心健康
                </p>
              </div>
            </div>

            <div className="flex items-start gap-3">
              <GitPullRequest className="w-5 h-5 text-primary mt-1" />
              <div>
                <h3 className="font-medium mb-1">参与贡献</h3>
                <p className="text-sm text-muted-foreground">
                  欢迎通过 Issue 和 Pull Request 参与项目改进，共同成长
                </p>
              </div>
            </div>
          </div>

          {/* 底部按钮 */}
          <div className="flex justify-between items-center pt-6 border-t">
            <Link
              href="/license"
              className="text-sm text-primary hover:text-primary/80 transition-colors"
            >
              查看许可协议
            </Link>
            <button
              onClick={() => setIsOpen(false)}
              className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
            >
              了解并继续
            </button>
          </div>
        </div>
      </div>
    </div>
  );
} 